<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <!--<link rel="icon" href="favicon.ico">-->

    <title>Dashboard Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../static/dist/css/bootstrap.css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}"
          rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="assets/css/ie10-viewport-bug-workaround.css" th:href="@{/assets/css/ie10-viewport-bug-workaround.css}"
          rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="assets/css/dashboard.css" th:href="@{/assets/css/dashboard.css}" rel="stylesheet">
    <style>
        .page{
            position: relative;
            float: right;

        }
    </style>

</head>

<body>

<!--nav 引用过来-->
<div th:replace="~{common/top::top_nav}"></div>

<div class="container-fluid">
    <div class="row">


        <!--模态框-->
        <div th:replace="/common/modal.html"></div>

        <!--sidebar 左侧导航栏-->
        <div th:replace="~{common/left::sidebar}"></div>

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">员工列表</h1>


            <div class="row">
                <div class="col-md-6">
                    <div class="btn-group" role="group" aria-label="...">
                        <a th:href="@{/emp/add}" href="${pageContext.request.contextPath}/emp/add" type="button"
                           class="btn btn-default  btn-primary" id="btn_add"> <span
                                class="glyphicon glyphicon-plus-sign"></span>添加
                        </a>
                        <button type="button" class="btn btn-default  btn-danger"
                                onclick="dels()">
                            <span class="glyphicon glyphicon-trash"></span>批量删除
                        </button>
                        <button type="button"
                                class="btn btn-default  btn-success btn-selectAll">
                            <span class="glyphicon glyphicon-unchecked">全选</span>
                        </button>
                    </div>
                </div>

                <div class="col-md-6">
                    <form id="myform" class="form-inline"
                          action="${pageContext.request.contextPath}/emp/main?ename=aa"
                          method="get" th:action="@{/emp/main}">
                        <div class="form-group">
                            <select class="form-control" id="deptSelect" name="deptno">

                                <option value="-1">查询全部</option>
                                <!--判断是否是当前选中-->
                                <option th:if="${#strings.equalsIgnoreCase(param.deptno, dept.deptno)}"
                                        th:selected="selected"
                                        th:text="${dept.dname}" th:value="${dept.deptno}"
                                        th:each="dept : ${deptList}"></option>
                                <!--if相反结果-->
                                <option th:unless="${#strings.equalsIgnoreCase(param.deptno, dept.deptno)}"
                                        th:text="${dept.dname}"
                                        th:value="${dept.deptno}" th:each="dept : ${deptList}"></option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail2">名称:</label>
                            <input type="text" class="form-control" id="exampleInputEmail2"
                                   placeholder="zhangsan" name="ename" th:value="${param.ename}">
                        </div>

                        <button type="submit" class="btn btn-default">查询</button>
                    </form>
                </div>
            </div>
            <!--end......-->

            <div class="table-responsive" >
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>序列</th>
                        <th>员工编号</th>
                        <th>员工名称</th>
                        <th>岗位</th>
                        <th>入职日期</th>
                        <th>薪水</th>
                        <th>部门</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    <!--emp:集合的元素,itState:状态,需要遍历的值-->
                    <tr th:each="emp,itState: ${pageInfo.list}">
                        <td><input type="checkbox" name="checkbox_name"> <span th:text="${itState.index+1}"></span></td>
                        <td th:text="${emp.empno}">1,001</td>
                        <td th:text="${emp.ename}">Lorem</td>
                        <td th:text="${emp.job}">ipsum</td>
                        <!--设置日期格式-->
                        <td th:text="${#dates.format(emp.hiredate,'yyyy-MM-dd')}">dolor</td>
                        <td th:text="${emp.sal}">sit</td>
                        <!--/*@thymesVar id="dname" type=""*/-->
                        <td th:text="${emp.dept.dname}">sit</td>
                        <td><a class="btn btn-sm btn-primary" href="${pageContext.request.contextPath}/emp/edit" th:href="@{'/emp/edit/'+${emp.empno}}"><span
                                class="glyphicon glyphicon-edit"></span>编辑</a>
                            <!--重新定义一个属性:myhref，设置新的url路径-->
                            <a class="btn btn-sm btn-danger btn-del" th:attr="myhref=@{'/emp/'+${emp.empno}}"
                               href="javascript:void(0)" th:value="${emp.empno}">
                                <span class="glyphicon glyphicon-trash"></span>删除</a></td>
                    </tr>

                    </tbody>
                </table>


                <!-- 删除delete  -->
                <form action="${pageContext.request.contextPath}/emp/${emp.empno}"
                      id="delForm" method="post">
                    <!--替换请求方式为DELETE  name:重新指定请求方式  -->
                    <input type="hidden" name="_method" value="DELETE">
                </form>

                <!-- 批量删除 -->
                <form action="${pageContext.request.contextPath}/emp/delSelected"
                      id="delsForm" method="post" th:action="@{/emp/delSelected}">
                    <!--替换请求方式为DELETE  name:重新指定请求方式  -->
                    <input type="hidden" name="_method" value="DELETE">
                </form>
            </div>
            <!--分页模块-->
            <div class="page"><nav aria-label="Page navigation" >
                <ul class="pagination">
                    <!-- 首页 -->
                    <li th:if="${pageInfo.hasPreviousPage}">
                        <a th:href="'/emp/main?page=1'">首页</a>
                    </li>
                    <li>
                        <a th:href="'/emp/main?page=' + ${pageInfo.prePage}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li th:each="pageNum:${#numbers.sequence(1, pageInfo.pages)}">
                        <a th:href="'/emp/main?page=' + ${pageNum}" th:text="${pageNum }"
                           th:if="${pageNum ne pageInfo.pageNum}"></a>
                        <a th:href="'/emp/main?page=' + ${pageNum}" th:text="${pageNum }"
                           th:if="${pageNum eq pageInfo.pageNum}"
                           th:style="'font-weight:bold;background: #6faed9;'"></a>
                    </li>
                    <li>
                        <a th:href="'/emp/main?page=' + ${pageInfo.nextPage}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav></div>
        </div>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="dist/js/jquery.min.js" th:src="@{/webjars/jquery/1.11.1/jquery.js}"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="dist/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.js}"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="assets/js/vendor/holder.min.js" th:src="@{/assets/js/vendor/holder.min.js}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js" th:src="@{/assets/js/ie10-viewport-bug-workaround.js}"></script>

<!--删除单个内容-->
<script>
    $(".btn-del").click(function () {

        $('#myModal').modal();
      //获取url
        var myhref = $(this).attr("myhref");
        $('#btnDel').on('click', function () {
            //更改对应表单action
            $("#delForm").attr("action", myhref).submit();
            // 手动隐藏模态框
            $('#myModal').modal('hide');
        })
    });

    /* 批量删除 */
    function dels() {

        //1.获取选中的内容
        var checkObj = $("input[name='checkbox_name']:checked");
        if (checkObj.length <= 0) {
            alert("请选择需要删除的数据!!!");
            return
        }
        //2.提示是否删除
        var flag = window.confirm("是否确认删除??")

        if (flag) {

            //3.封装参数
            $.each(checkObj, function (index, obj) {
                //根据节点信息，获取对应的 empno
                var paramVal = $(obj).parent().next().text();
                $("<input type='hidden' name='emps' value='" + paramVal + "' />").appendTo("#delsForm");
            });
            //4.提交
            $("#delsForm").submit();
        }
    }

    /* 全选  点击全选按钮*/
    $(".btn-selectAll")
        .click(
            function () {
                //多选框
                var dates = $("input[name='checkbox_name']");

                //查找是否包含关键字unchecked，如果包含证明之前没有被选中
                if ($(this).find("span").attr("class").indexOf(
                    "unchecked") != -1) {
                    //将所有的内容选中
                    $.each(dates, function (index, data) {
                        data.checked = true;
                    })
                    //将图标设置为全选
                    $(this).find("span").attr("class",
                        "glyphicon glyphicon-check");
                } else {
                    //否则设置为未选中
                    $.each(dates, function (index, data) {
                        data.checked = false;
                    })
                    //图标设置为未选中
                    $(this).find("span").attr("class",
                        "glyphicon glyphicon-unchecked");
                }
            });

</script>

</body>
</html>
